<template>
    <div id="wechat-member-list-btn-memnu">
        <!-- <div class="btn-memnu-assist"></div> -->
        <div class="bottom-menu-list">
            <!-- <a @click="toIndexPage" id="to-index" class="bottom-menu-list-chi">
                <img class="bottom-menu-list-chi-img" src="https://www.mrobiji.com/images/to-index-association.svg">
                <span class="bottom-menu-list-chi-text">主页</span>
            </a> -->
            <a @click="toUserBusList" id="to-index" class="bottom-menu-list-chi">
                <img class="bottom-menu-list-chi-img" src="https://www.mrobiji.com/images/member-list-gray-icon.svg">
                <span class="bottom-menu-list-chi-text">人员</span>
            </a>
            <a @click="clickShare" id="to-share" class="bottom-menu-list-chi">
                <img class="bottom-menu-list-chi-img" src="https://www.mrobiji.com/images/share-icon.svg">
                <span class="bottom-menu-list-chi-text">分享</span>
            </a>
            <a @click="toWechatGroupDetail" id="show-as-list" class="bottom-menu-list-chi">
                <img class="bottom-menu-list-chi-img" src="https://www.mrobiji.com/images/menu-association-gray-icon.svg">
                <span class="bottom-menu-list-chi-text">群动态</span>
            </a>
            <a @click="enterSetBus" id="to-create-card" class="bottom-menu-list-chi bottom-menu-list-chi-create">
                <span class="bottom-menu-list-chi-text">发布我的供应需求</span>
            </a>
        </div>
        <!-- 显示分享 -->
        <user-shared-show ref="userSharedShow"></user-shared-show>
    </div>
</template>

<script>
// 自定义方法
import { toIndex, enterUserSet, enterWechatGruopDetail, enterBusMemberList } from '_projectFn/page'
import { isLoginChose } from '_projectFn/login'
import { customShare } from '_commonFn/share'
import { getCookie } from '_commonFn/cookie.js'
import { failTextVantToa, loadingVantToa, clearVantToa } from "_projectFn/prompt"
import { checkDataEqualVal } from "_commonFn/check"

// 自定义组件
import UserSharedShow from "_components/project/ShowWindow/UserSharedShow"

export default {
    name: 'BtnMenu',
    props: {
        wechatGroupNo: {
            default: ''
        },
        isOuter: {
            default: 0
        },
        overlayShow: {
            type: Boolean,
            default: false,
        },
        wechatGroupName: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            userShareCount: 0,
            showWindow: ''
        }
    },
    methods: {
        // 进入首页
        toIndexPage() {
            toIndex({})
        },
        // 进入业务人员列表页面
        toUserBusList() {
            enterBusMemberList()
        },
        // 点击分享
        clickShare() {
            if (isLoginChose()) {
                this.setShare('user')
            }
        },
        // 点击进入微信群详情
        toWechatGroupDetail() {
            // console.log('this.wechatGroupNo', this.wechatGroupNo)
            if (this.wechatGroupNo) {
                if (process.env.IS_LOCAL === 0) {
                    this.$emit('cachePageData')
                }
                enterWechatGruopDetail({
                    isOuter: this.isOuter,
                    wechatGroupNo: this.wechatGroupNo,
                    type: 'list',
                })
            } else {
                failTextVantToa("尚未关联工品社群微信群!")
            }
        },
        // 点击进入设置业务名片页面
        enterSetBus() {
            if (isLoginChose()) {
                if (process.env.IS_LOCAL === 0) {
                    this.$emit('cachePageData')
                }
                enterUserSet('business')
            }
        },
        // 分享设置
        setShare(type = 'default', name = this.wechatGroupName) {
            if (isLoginChose()) {
                const that = this
                if (that.$store.state.wechat.isWechatBro) {
                    checkDataEqualVal({
                        data: that.$store.getters,
                        key: 'getWechatStatus',
                        val: ['success', 'fail'],
                        callback(val) {
                            if (val === 'success') {
                                if (name) {
                                    if (that.userShareCount > 0) {
                                        that.showShareSty() // 显示用户分享提示
                                    } else {      
                                        that.share(type, name) // 执行分享
                                        clearVantToa()
                                        that.showShareSty() // 显示用户分享提示
                                    }
                                } else {
                                    loadingVantToa({})
                                    setTimeout(() => {
                                        that.setShare(type, name)
                                    }, 10)
                                }
                            }
                        }
                    })
                } else {
                    failTextVantToa('请在微信客户端打开')
                }
            }
        },
        showShareSty() {
            this.$refs.userSharedShow.showOverlay()
        },
        // 执行分享
        share(type, name = '') {
            console.log('type', type)
            const url = location.href.split('#')[0],
            link = type === 'user' ? `${url}&shareUser=WechatUserItem_${getCookie('UserId')}_${this.wechatGroupNo}` : url;
            customShare({
                shareData: {
                    shareDynamic: {
                        title: `【${name}】群员信息列表`,
                        link,
                        imgUrl: `https://www.mrobiji.com/images/share-member-list-icon.png`,
                        desc: `1分钟创建工品业务名片,微信群内回复"all"获取详情 `
                    },
                    shareFriend: {
                        title: `【${name}】群员信息列表`,
                        link,
                        imgUrl: `https://www.mrobiji.com/images/share-member-list-icon.png`,
                        desc: `1分钟创建工品业务名片,微信群内回复"all"获取详情 `
                    }
                }
            })
        }
    },
    components: {
        UserSharedShow,
    }
}
</script>

<style lang="scss" scoped>
.btn-memnu-assist {
    height: 55px;
    width: 100%;
}
.bottom-menu-list {
    width: 100%;
    height: 55px;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    background: white;
    box-shadow: 0px 1px 12px -5px #999999;
    border-top: 1px solid #ececec;

    .bottom-menu-list-chi {
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100%;
        width: 20%;
        color: #999999;
        
        &:not(:last-child) {
            &:not(:nth-last-child(2)) {
                position: relative;
                &::after {
                    position: absolute;
                    content: '';
                    height: 60%;
                    top: 20%;
                    right: -0.5px;
                    width: 1px;
                    background: #d6d6d6;
                }
            }
        }

        .bottom-menu-list-chi-img {
            width: 15px;
            height: 15px;
        }

        .bottom-menu-list-chi-text {
            width: 100%;
            line-height: 18px;
            text-align: center;
        }
    }

    .bottom-menu-list-chi-create {
        width: 40%;
        background: #0077bf;
        color: white;
        font-size: 15px;
        font-weight: bold;
        display: block;
        text-align: center;
        line-height: 51px;
    }
}
</style>